<template>
  <div></div>
  <div class="title">
    <span>考核过程记录</span>
  </div>
  <!-- <a-steps
    v-if="props?.record && props.record.length"
    :current="current"
    direction="vertical"
    type="dot"
  >
    <a-step v-for="item in props?.record" :key="item.id">
      <template #description>
        <a-space class="description">
          <div class="description-item">
            <a-avatar>
              <img
                alt="avatar"
                src="https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/3ee5f13fb09879ecb5185e440cef6eb9.png~tplv-uwbnlip3yd-webp.webp"
              />
            </a-avatar>
          </div>
          <a-space class="description-item">
            <div class="user-name">{{ item.userInfo?.name }}</div>
            <div>人员职位</div>
          </a-space>
          <div class="description-item">
            {{ getProbationExamineStatusName(item.type) }}
          </div>
        </a-space>
      </template>
      {{ dayjs(item.updatedAt).format('YYYY-MM-DD HH:mm') }}
    </a-step>
  </a-steps> -->
</template>

<script lang="ts" setup>
import { useVModel } from '@vueuse/core';
import { getProbationExamineStatusName } from '@/utils/utils';
import dayjs from 'dayjs';

const props = withDefaults(
  defineProps<{
    record?: any;
  }>(),
  {
    record: () => []
  }
);
const current = ref(1);
</script>

<style scoped lang="less">
.title {
  min-height: 30px;
  font-weight: 600;
  font-size: 14px;
  background: #f5f7fb;
  padding: 5px 0;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  &::before {
    content: '';
    margin: 0 5px;
    display: inline-block;
    width: 3px;
    height: 12px;
    border-left: #409efe solid 1px;
    background: #409efe;
  }
  .title-right {
    flex: 1;
    text-align: right;
  }
}
.description {
  display: flex;
  &-item {
    .user-name {
      color: #000;
      font-size: 14px;
    }
  }
}
</style>
